<!--
 * @Description:tager鼠标跟随事件
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-17 22:31:00
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>tager鼠标跟随事件</title>

	<script>
		window.onload = function () {
			var image = document.getElementById("img")
			var leaderX = 0,
				leaderY = 0,
				targetX = 0,
				targetY = 0;

				document.onclick=function(e){
						targetX=e.clientX-image.offsetWidth/2
						targetY=e.clientY-image.offsetHeight/2
				}

			setInterval(() => {
				leaderX = leaderX + (targetX - leaderX) / 10
				leaderY = leaderY + (targetY - leaderY) / 10
				image.style.left=leaderX+"px"
				image.style.top=leaderY +"px"
			},10)



		}
	</script>
</head>

<body>
	<style>
		img {
			width: 80px;
			height: 80px;
			position: absolute;
			top: 0;
			left: 0;

		}
	</style>
	<div>

	</div>
	<img src="./img/1.jpg" alt="" id="img">
</body>

</html>